<script>
export default {
    // 校验在 props 中进行，此时 props 不再是数组，而是对象形式
    props: {
        // 表示有传递过来 data1 变量
        data1: {
            // type 关键字指定需要接收的是 String 类型
            type: String
        },
        data2: {
            type: Object
        },
        data3: {
            // 可以同时指定多个类型
            type: [String, Number]
        },
        data4: {
            // 指定默认值，当没有实际传递来数据时使用的值
            // 对于字符串，数字，默认值直接使用 default 关键字
            // 对于数组，对象等，默认值必须使用工厂函数返回，而不能直接使用 default
            type: Array,
            default() {
                return ['空数组']
            }
        },
        data5: {
            default: "none 呢"
        },
        test: {}
    },
    methods: {
        modifyData() {
            console.log("先打印 test 数据");
            console.log(this.test);
            console.log("尝试修改 test 数据");
            this.test = "修改数据"
        }
    }
}
</script>

<template>
    <div>子组件</div>
    <hr>
    <div class="container">
        <div>data1 需要是字符串 | {{ data1 }}</div>
        <div>如果 data1 没有传递字符串，控制台将会有以下的警告信息</div>
        <img src="./image.png" alt="">
    </div>
    <hr>

    <div class="container">
        <div>data2 需要是对象 | {{ data2 }}</div>
        <div>data2.name：{{ data2.name }}</div>
    </div>
    <hr>

    <div class="container">
        <div>data3 可以是字符串或者数字 | {{ data3 }}</div>
    </div>
    <hr>

    <div class="container">
        <ul>
            <li v-for="item of data4">{{ item }}</li>
        </ul>
    </div>
    <hr>

    <div class="container">
        <div>data5 没有传递数据，因此是默认值：{{ data5 }}</div>
    </div>
    <hr>

    <div class="container">
        <div>不允许修改从父组件传递到子组件传递来的数据，即不能修改 props 中的数据</div>
        <div>尝试执行 this.test = "修改数据"</div>
        <button @click="modifyData">尝试修改数据，查看控制台报错</button>
    </div>

</template>

<style scoped>
.container {
    /* 背景颜色 */
    background-color: #d9fdff;
}
</style>